<template>
	<view>
		<u-navbar :custom-back="customBack" :border-bottom="false" title-color="#000" :title="navTitle"></u-navbar>
<!-- 		<view class="" @click="upload">
			上传
		</view> -->
		<view class="content">
			<view class="bg">
				<u-image :show-loading="false" :src="userId == '' ?  'https://photo.hiyipin.net/USER/de87df4e-3125-4d0d-b36e-4ff0e45367f4.png' : 'https://photo.hiyipin.net/USER/1f87a74c-2c03-4999-a796-6149fd816c79.png'"
				 mode="widthFix" width="100%"></u-image>
			</view>

			<view class="content-box">
				<block v-if="userId == ''">
					<view class="title">
						<view>好友助力金额<text>{{orderformrebateinfo.orderUserAlreadyRebateAmount}}</text></view>
						<text>(订单收货7天后待结算金额自动进入我的钱包)</text>
					</view>
					<view class="progress">
						<u-line-progress striped inactive-color="rgba(244,184,2,.1)" striped-active active-color="#FD5962" :percent="orderformrebateinfo.progressRate * 100">
							<view class="progress-text">{{orderformrebateinfo.alreadyRebateAmount}}</view>
						</u-line-progress>
						<view class="money">
							<text>0元</text>
							<text>{{orderformrebateinfo.orderProfitAmount}}元</text>
						</view>
					</view>
					<view class="info-title">
						<view>邀请好友，额外开启<text>红包</text></view>
						<text>邀请多个新用户，领多个红包</text>
					</view>
				</block>
				<block v-else>
					<view class="user-name">
						您的好友{{orderformrebateinfo.orderUserNickName}}
					</view>
					<view class="progress" style="margin: 0 auto;margin-bottom: 10rpx;">
						<u-line-progress striped inactive-color="rgba(244,184,2,.1)" striped-active active-color="#FD5962" :percent="orderformrebateinfo.progressRate * 100">
							<view class="progress-text">{{orderformrebateinfo.alreadyRebateAmount}}</view>
						</u-line-progress>
						<view class="money">
							<text>0元</text>
							<text>{{orderformrebateinfo.orderProfitAmount}}元</text>
						</view>
					</view>
					<view class="title" style="margin-bottom: 50rpx;">
						<view style="font-size: 48rpx;">邀请您助力领<text style="font-size: 48rpx;margin: 0;">红包</text></view>
					</view>
				</block>
				<button v-if="userId == ''" open-type="share" class="btn">
					<u-image :show-loading="false" src="https://photo.hiyipin.net/USER/10bd8242-562e-4bda-b2e9-ffcd6efc840d.png" width="630"
					 height="128"></u-image>
					<view class="text">分享好友助力</view>
				</button>
				<view v-else class="btn" @click="help">
					<u-image :show-loading="false" src="https://photo.hiyipin.net/USER/10bd8242-562e-4bda-b2e9-ffcd6efc840d.png" width="630"
					 height="128"></u-image>
					<view class="text">帮TA助力</view>
				</view>
				<u-gap height="15"></u-gap>
				<view class="btn" @click="$u.route({
					type:'tab',
					url:'/pages/tabBar/newIndex/newIndex'
				})">
					<u-image :show-loading="false" src="https://photo.hiyipin.net/USER/c6065487-08ed-43f3-b1d1-79659278c399.png" width="630"
					 height="128"></u-image>
					<view class="text">去首页逛逛</view>
				</view>
				<view class="line">
					<view>
						<u-line color="#E5E5E5" />
					</view>
				</view>
				<view class="list">
					<view class="list-title">
						{{userId == '' ? '已有'+count+'位好友为你助力' : '英雄榜'}}
					</view>
					<view class="item" v-for="(item,index) in list" :key="index">
						<view>
							<u-image :src="item.shareUserHeadPhoto" width="68" height="68" shape="circle"></u-image>
							<view class="info">
								<view>{{item.shareUserNickName}}</view>
								<view>礼轻情义重</view>
							</view>
						</view>
						<view>助力{{item.joinUserAmount}}元</view>
					</view>
					<u-gap></u-gap>
					<u-loadmore :status="status"></u-loadmore>
					<u-gap></u-gap>
				</view>
			</view>
			<u-popup :backgroundColor="'transparent'" mode="center" v-model="show">
				<u-image :src="coverUrl" width="750" height="833"></u-image>
				<view class="text-popup">
					<text>{{joinOrderRebate}}</text>/元
				</view>
				<view class="close" @click="show = false">
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	export default {
		onShareAppMessage() {
			return {
				imageUrl: 'https://photo.hiyipin.net/USER/213e9522-c9f8-4851-8d76-37b56f8d040d.png',
				path: '/pages/user/shareOrder/shareOrder?orderNumber=' + this.orderNumber + '&userId=' + uni.getStorageSync(
					'userInfo').id
			}
		},
		onShareTimeline() {
			return {
				imageUrl: 'https://photo.hiyipin.net/USER/213e9522-c9f8-4851-8d76-37b56f8d040d.png',
				path: '/pages/user/shareOrder/shareOrder?orderNumber=' + this.orderNumber + '&userId=' + uni.getStorageSync(
					'userInfo').id
			}
		},
		data() {
			return {
				appletImgUrl:appletImgUrl,
				imageURL: this.imageURL,
				status: 'loading',
				show: false,
				joinOrderRebate: 0,
				count: 0,
				orderformrebateinfo: '',
				coverUrl: this.imageURL + 'USER/8050a483-2033-4033-8278-32aa3ebaa686.png',
				userId: '',
				navTitle: '',
				list: []
			};
		},
		// onPullDownRefresh() {
		// 	this.status = 'loading'
		// 	this.pageNo = 1
		// 	this.initData()
		// 	this.getList(res => {
		// 		this.count = res.count
		// 		this.list = res.list
		// 		this.status = this.list.length < 10 ? 'nomore' : 'loadmore'
		// 		uni.stopPullDownRefresh()
		// 	})
		// },
		onReachBottom() {
			if (this.status == 'loading' || this.status == 'nomore') return
			this.status = 'loading'
			this.pageNo++
			this.getList(res => {
				if (res.list == '') {
					this.status = 'nomore'
					return
				}
				this.list = this.list.concat(res.list)
				this.status = 'loadmore'
			})
		},

		onLoad(options) {
			this.navTitle = options.userId ? '好友助力' : '分享返现'
			this.orderNumber = options.orderNumber
			this.pageNo = 1
			this.scene = options.scene ? options.scene : ''
			if (options.userId) {
				if (!uni.getStorageSync('userInfo')) {
					uni.setStorageSync('proUserId', options.userId)
				}
				this.userId = options.userId
				this.initData()
				this.getList(res => {
					this.count = res.count
					this.list = res.list
					this.status = this.list.length < 10 ? 'nomore' : 'loadmore'
				})
			} else {
				this.$u.get('orderformrebateinfo/checkUserJoinShareOrder/' + options.orderNumber).then(res => {
					if (!res.hasBeenOperating) {
						this.help()
					} else {
						this.initData()
						this.getList(res => {
							this.count = res.count
							this.list = res.list
							this.status = this.list.length < 10 ? 'nomore' : 'loadmore'
						})
					}
				})
			}
		},
		// onUnload() {
		// 	if (this.scene == 'pay') {
		// 		this.customBack()
		// 	}
		// },
		methods: {
			customBack() {
				if (this.scene == 'pay') {
					this.$u.route({
						type: 'redirect',
						url: '/pages/user/order/order',
						params: {
							current: 0,
							scene: 'pay'
						}
					})
				} else {
					this.$u.route({
						type: 'back'
					})
				}
			},
			
			initData() {
				this.$u.get('orderformrebateinfo/orderShareInfo/' + this.orderNumber).then(res => {
					this.orderformrebateinfo = res
				})
			},
			getList(callback) {
				this.$u.post('orderformrebateinfo/orderUserShareRecordList', {
					basicOrderNumber: this.orderNumber,
					pageNo: this.pageNo,
					pageSize: 10
				}).then(res => {
					if (res.count) {
						res.list.forEach(item => {
							if (item.shareUserHeadPhoto) {
								if (item.shareUserHeadPhoto.indexOf("https") != 0) {
									item.shareUserHeadPhoto = this.imageURL + item.shareUserHeadPhoto
								}
							} else {
								item.shareUserHeadPhoto = this.appletImgUrl+'team-head-img.png'
							}
						})
						callback(res)
					} else {

					}
				})
			},
			help() {
				if (!uni.getStorageSync('userInfo')) {
					this.$u.route('/pages/user/login/login')
					return
				}
				this.$u.get('orderformrebateinfo/joinOrderRebate/' + this.orderNumber).then(res => {
					this.show = true
					this.joinOrderRebate = res
					this.initData()
					this.getList(res => {
						this.count = res.count
						this.list = res.list
						this.status = this.list.length < 10 ? 'nomore' : 'loadmore'
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-name {
		text-align: center;
		font-size: 36rpx;
		margin-bottom: 30rpx;
	}

	.text-popup {
		position: absolute;
		bottom: 30%;
		left: 50%;
		color: #FFE3B7;
		font-size: 30rpx;

		text {
			font-size: 100rpx;
			font-weight: bold;
		}

		transform: translateX(-50%);
	}

	.close {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translateX(-50%);
		width: 60rpx;

		height: 60rpx;
	}

	page {
		// padding-top: calc(44px + var(--status-bar-height));
		background-color: #f7f7f7;
	}

	.bg {
		position: absolute;
		width: 100%;
		left: 0;
		top: 0;
		// z-index: -1;
	}

	.content {
		padding-top: 418rpx;
		position: relative;
		background-color: #F05528;
		padding-bottom: 30rpx;
	}

	.content-box {
		// position: absolute;
		// bottom: 35rpx;
		// left: 50%;
		// transform: translateX(-50%);
		background-color: #fff;
		// height: 1400rpx;
		min-height: 1400rpx;
		border-radius: 40rpx;
		box-shadow: 0px 10rpx 30rpx 0px rgba(235, 38, 66, 0.6);
		width: 690rpx;
		overflow: hidden;
		margin: 0 auto;
		position: relative;
		z-index: 1;
		padding-top: 40rpx;

		.list {
			background-color: #fff;
			padding: 0 30rpx;

			.item {
				display: flex;
				justify-content: space-between;
				padding: 20rpx 0;
				align-items: center;

				>view {
					&:last-child {}

					&:first-child {
						display: flex;

						.info {
							margin-left: 20rpx;

							>view {
								&:last-child {
									font-size: 24rpx;
									color: #aaa;
								}
							}
						}
					}
				}
			}
		}

		.list-title {
			text-align: center;
			font-weight: bold;
		}

		.line {
			padding: 50rpx 0;

			>view {
				width: 570rpx;
				margin: 0 auto;
			}
		}

		.tip-text {
			background-color: #F7F7F7;
			padding: 5rpx 30rpx;
			display: inline-block;
			border-radius: 22px;
			margin-top: 15rpx;

			text {
				color: #FF4D46;
			}
		}

		.tip-box {
			text-align: center;
			padding-top: 25rpx;
		}

		.timestamp {
			text-align: center;
		}

		.btn {
			width: 630rpx;
			margin: 0 auto;
			position: relative;
			background: none;
			font-size: 28rpx;
			padding: 0;
			line-height: normal;

			&::after {
				border: none;
			}

			.text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -95%);
				color: #fff;
			}
		}

		// padding: 40rpx 0;
		.box {
			position: relative;
			height: 100%;
		}

		.card-bg {
			top: 50%;
			position: absolute;
			z-index: -1;
			transform: translateY(-50%);
		}

		.info-title {
			text-align: center;
			margin-bottom: 50rpx;

			>text {
				color: #AAAAAA;
				font-size: 26rpx;
			}

			>view {
				font-size: 48rpx;

				text {
					color: #FF4D46;
				}
			}
		}

		.progress {
			width: 590rpx;
			margin: 40rpx auto;

			.money {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
			}

			.progress-text {}
		}

		.title {
			text-align: center;

			view {
				font-size: 36rpx;

				text {
					color: #FF4D46;
					font-size: 60rpx;
					font-weight: bold;
					margin: 0 10rpx;
				}
			}

			>text {
				font-size: 26rpx;
				color: #AAAAAA;
			}
		}
	}
</style>
